<template>

  <div class="app-container">

    <el-form ref="form" :model="form" label-width="80px">

      <el-form-item label="文件">
        <el-upload
          class="upload-demo"
          :action="host+'/guard/article/uploadFile?module=article'"
          accept=".doc,.docx,.pptx,.ppt,.zip,.rar,.jpg,.png,.jpeg"
          :on-success="handleFile"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>

      <el-form-item label="演讲稿" v-if="form.type=='ppt'|| form.type=='pptx' ||form.type=='zip'||form.type=='rar'">
        <el-upload
          class="upload-demo"
          :action="host+'/guard/article/uploadFile?module=article'"
          accept=".doc,.docx,.ppt,.pptx,.xls,.xlsx,.zip,.rar,.jpg,.png,.jpeg,.pdf"
          :on-success="handlePptDocx"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>

      <el-form-item label="ppt图片" v-if="form.type=='ppt'|| form.type=='pptx' || form.type=='xls' || form.type=='xlsx' ||form.type=='zip'||form.type=='rar'">
        <div style="color: red">PS：第一张上传的图作为ppt封面</div>
        <el-upload
          :action="host+'/guard/upload?module=article'"
          list-type="picture-card"
          :on-success="handleImg"
          :before-upload="beforeAvatarUpload"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>

      <el-form-item label="分类">
        <el-cascader placeholder="分类"
         v-model="form.classify_id"
         :options="classifies"
         :props="{ expandTrigger: 'hover' ,value:'id',label:'name'}"
        >
        </el-cascader>
      </el-form-item>

      <el-form-item label="是否敏感">
        <el-radio-group v-model="form.is_sensitive">
          <el-radio label="1">是</el-radio>
          <el-radio label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="标题">
        <el-input v-model="form.title"></el-input>
      </el-form-item>

      <el-form-item label="发布时间">
        <el-date-picker
          v-model="form.publish_at"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>

<!--      <el-form-item label="摘要">
        <div id="div2"></div>
      </el-form-item>-->


      <el-form-item label="正文">
        <div id="div1">
        </div>
      </el-form-item>

<!--      <el-form-item label="上架/下架">-->
<!--        <el-switch-->
<!--          :active-value="1"-->
<!--          :inactive-value="2"-->
<!--          v-model="form.up_down"-->
<!--          active-text="上架"-->
<!--          inactive-text="下架">-->
<!--        </el-switch>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="是否置顶">-->
<!--        <el-switch-->
<!--          :active-value="1"-->
<!--          :inactive-value="2"-->
<!--          v-model="form.is_top"-->
<!--          active-text="是"-->
<!--          inactive-text="否">-->
<!--        </el-switch>-->
<!--      </el-form-item>-->



      <el-form-item label="">
        <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
        <!-- <el-button @click="closeAddDialog" >重置</el-button> -->
      </el-form-item>



    </el-form>

  </div>


</template>

<script>
import {getDateStr, myGet, myPost} from '@/utils/myRequest'
import E from 'wangeditor'
const urlArticleClassifyLst = '/guard/article/classify/lst'
const urlArticleAdd = '/guard/article/add'
export default {

  data() {
    return {
      host:process.env.VUE_APP_BASE_API,
      classifies:[],
      imageUrl:'',
      editor:null,
      editor2:null,
      dialogImageUrl: '',
      dialogVisible: false,
      form:{
        title:'',
        is_sensitive:'2',
        classify_id:'',
        /*summary:'',*/
        file_url:'',
        // up_down:1,
        // is_top:2,
        content:'',
        type:'docx',
        docx_url:'',
        img_urls:[],
        publish_at:''
      },
    };
  },
  methods:{
    onSubmit(formName) {
      this.$refs[formName].validate((valid)=>{
        if(valid){

          //console.log('form',this.form)
          this.form.content = this.editor.txt.html()
          //this.form.summary = this.editor2.txt.html()
          myPost(urlArticleAdd,this.form).then(res => {
            if (res.status) {
              this.$message.success(res.msg)
              this.$router.push('/article/lst')
            }
          })
        }
      })
    },
    handleFile(res, file) {
      if(res.status){
        this.form.type = res.data.records.ext
        this.form.file_url = res.data.records.filePath
        this.form.title = res.data.records.originName
        this.editor.txt.html(res.data.records.body)
        //this.editor2.txt.html(res.data.records.summary)
      }else{
        this.$message.error('上传失败!')
      }
    },
    handleImg(res, file) {
      if(res.status){
        this.form.img_urls.push(res.data.records.filePath)
      }else{
        this.$message.error('上传失败!')
      }
    },
    beforeAvatarUpload(file) {

      /*if(this.form.img_urls.length<=0){
        this.$message.warning('请先上传封面')
        return false
      }*/
      /*const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;*/
    },
    closeAddDialog(){
      Object.assign(this.form ,this.$options.data().form)
    },
    initEditor(){
      this.editor = new E('#div1')
      this.editor.config.uploadImgServer = '/guard/article/uploadImg'
      this.editor.config.uploadVideoServer = '/guard/article/uploadVideo'
      this.editor.create()

      /*this.editor2 = new E('#div2')
      this.editor2.config.uploadImgServer = '/guard/article/uploadImg'
      this.editor2.config.uploadVideoServer = '/guard/article/uploadVideo'
      this.editor2.create()*/
    },




    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePptDocx(res, file) {
      if(res.status){
        this.form.docx_url = res.data.records.filePath
      }
    }
  },


  mounted() {
    this.initEditor()
    myGet(urlArticleClassifyLst).then(res=>{
      if(res.status){
        this.classifies = res.data.records
      }
    })
    this.form.publish_at = getDateStr(1) +" 06:00:00"
  }
}
</script>

<style >

.w-e-menu {
  z-index: 2 !important;
}
.w-e-text-container,.w-e-toolbar {
  z-index: 1 !important;
}

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
